<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table 模块快速使用</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/layuimini/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加资产组 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除资产组 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="Console">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="Console" target="_blank">Console</a>
        </script>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">删除</a>
        </script>
        <div id="django-webssh-terminal" class="hide">
            <div id="terminal"></div>
        </div>
    </div>
</div>
<script src="/static/layui/layui.js"></script>
<script>
layui.use(['form', 'table','element'], function() {
    var table = layui.table,
        form = layui.form,
        $ = layui.jquery;
    //第一个实例
    table.render({
        elem: '#currentTableId'
        //,height: 312
        , url: '/resources/group/api_json/' //数据接口
        , toolbar: '#toolbarDemo'
        , defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
        }]
        ,cellMinWidth: 50
        , page: true //开启分页
        , cols: [[ //表头
            {type: "checkbox"}
            , {field: 'id', title: 'ID', width: 50, align: "center"}
            , {field: 'groupname', title: '资产组',align: "center"}
            , {field: 'hosts', title: '主机', align: "center"}
            , {field: 'utime', title: '更新时间', align: "center"}
            , {field: 'classify', title: '操作', toolbar: '#currentTableBar',width: 200, align: "center"}
        ]],
        limits: [10, 15, 20, 25, 50, 100],
        limit: 15,
        skin: 'even'
    })

    /**
     * toolbar事件监听
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
        if (obj.event === 'add') {   // 监听添加操作
            $.ajax(
                {
                    url: '/resources/group/add_group/',
                    type: 'get',
                    success: function (data) {
                        //alert(res.os_list);
                        layer.open({
                            title: '添加资产组',
                            type: 2, // 1:页面层 2: ifream层
                            shade: 0.2,
                            maxmin: false,
                            shadeClose: true,
                            area: ['90%', '80%'],
                            //offset: [openWH[2] + 'px', openWH[3] + 'px'],
                            content: '/static/layuimini/page/table/add_group.html',
                            success : function(layero, index) {

                                var iframe = layero.find('iframe')[0].contentWindow;
                                var body = layer.getChildFrame('body', index);

                                //主机选择
                                //alert(JSON.stringify(data.newservers));
                                iframe.test.method1(data.newservers);
                                //解决select无法传值
                                iframe.layui.form.render('select');
                            }
                        });
                }
             });

        } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;

                ///
                layer.confirm('确定要删除吗', {
                    btn: ['确定', '取消'],
                    btn1: function () {
                        $.each(data, function (index, item) {
                            var id = item.id;
                            $.ajax({
                                url: '/resources/group/delete/',
                                type: 'POST',
                                data: {"servergroup_id": id},
                                success: function (res) {
                                    //layer.alert(res.msg);
                                    //layer.close(index);
                                    window.location.reload();
                                }
                            })
                        });
                    },
                    btn2: function () {
                        layer.close(layer.index);
                    }
                })


                ///
            }
    });
    // 监听编辑事件
    table.on('tool(currentTableFilter)', function (obj) {
        if (obj.event === 'edit') {   // 监听编辑操作
            var id = obj.data.id;
            $.ajax(
                {
                    url: '/resources/group/edit/',
                    type: 'get',
                    data: {"id":id},
                    success: function (data) {
                        layer.open({
                            title: '编辑用户',
                            type: 2, // 1:页面层 2: ifream层
                            shade: 0.2,
                            maxmin: false,
                            shadeClose: true,
                            area: ['90%', '80%'],
                            //offset: [openWH[2] + 'px', openWH[3] + 'px'],
                            content: '/static/layuimini/page/table/edit_group.html',
                            btn:['确认提交'],
                            success : function(layero, index) {
                                form.render();
                                var iframe = layero.find('iframe')[0].contentWindow;
                                var body = layer.getChildFrame('body', index);

                                //ID
                                body.find('#id').val(data.id);

                                //资产组名
                                body.find('#name').val(data.name);

                                ///主机选择

                                iframe.test.method1(data.data_list);

                                 //备注
                                body.find('#info').val(data.info);

                                //解决select无法传值
                                iframe.layui.form.render('select');

                            },
                            end: function() {
                                window.location.reload();//写在这里的话不管是否提交成功都会刷新这个页面
                                return false;
                            },
                            yes:function (index,layero) {
                                var newsForm = layer.getChildFrame('#userForm', index);
                                var dataForm = newsForm.serialize();
                                dataForm = decodeURIComponent(dataForm,true);//添加的表单数据
                                $.ajax({
                                    url: '/resources/group/edit/',
                                    type: 'POST',
                                    data: dataForm,
                                    success: function (res) {
                                        layer.alert(res.msg);
                                        //var index = parent.layer.getFrameIndex(window.name);
                                        //parent.layer.close(index);
                                        layer.close(index);
                                    }
                                })
                                //});

                            }
                        });
                }
             });

        } else if (obj.event === 'delete'){
            var id = obj.data.id;
            layer.confirm('确定要删除吗', {
                btn: ['确定', '取消'],
                btn1: function () {
                    $.ajax(
                        {
                            url: '/resources/group/delete/',
                            type: 'POST',
                            data: {"servergroup_id": id},
                            success: function (data) {
                                layer.close(layer.index);
                                window.location.reload();
                            }
                        }
                    )
                },
                btn2: function () {
                    layer.close(layer.index);
                }
            })
        }else if(obj.event === 'Console'){
            var id = obj.data.id;
            //window.location.href='"/devops/ssh_console/?id='+id+'"';
            var url = '/devops/ssh_console/?id='+id;
            let index =layer.open({
                type: 2,
                area: ['100%', '100%'], // 100%全屏
                shadeClose: true,
                shade: 0.4,
                title: '', // 标题留空让弹窗页头隐藏掉
                closeBtn: 0, // 不显示右上角那个X关闭按钮
                content: url, // 内容
                btn: ['退出']

            });
            layer.full(index);
        }

        ///
    });





});

</script>
</body>
</html>